<template>
  <div class="pending">
    <el-form :inline="true" :model="query">
      <el-form-item label="活动名称">
        <el-input
          v-model="query.seckillName"
          maxlength="15"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="query.state" placeholder="请选择状态">
          <el-option label="全部" value="null" />
          <el-option label="未开始" value="0" />
          <el-option label="进行中" value="1" />
          <el-option label="已结束" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="clear">重置</el-button>
        <el-button type="primary" @click="addActivity">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading.table"
      :data="tableData"
      border
      :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
      tooltip-effect="dark"
      style="width: 100%"
      class="dataTable"
    >
      <el-table-column label="活动名称" width="220">
        <template #default="scope">{{ scope.row.seckillName }}</template>
      </el-table-column>
      <el-table-column label="状态" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="scope.row.state === 0">未开始</span>
          <span v-if="scope.row.state === 1">进行中</span>
          <span v-if="scope.row.state === 2">已结束</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="活动内容"
        show-overflow-tooltip
      />
      <el-table-column
        prop="effectiveStart"
        label="活动开始时间"
        show-overflow-tooltip
      />
      <el-table-column
        prop="effectiveEnd"
        label="活动结束时间"
        show-overflow-tooltip
      />
      <el-table-column label="操作" show-overflow-tooltip>
        <template #default="scope">
          <div class="btnList">
            <el-button
              v-if="scope.row.state === 0"
              type="primary"
              link
              @click="editActivity(scope.row.shopSeckillId)"
            >编辑</el-button>
            <el-button
              v-if="scope.row.state !== 0"
              type="primary"
              link
              @click="visitActivity(scope.row.shopSeckillId)"
            >详情</el-button>
            <el-button
              v-if="scope.row.state !== 0"
              type="primary"
              link
              @click="showData(scope.row)"
            >数据</el-button>
            <el-popconfirm
              v-if="scope.row.state === 0 || scope.row.state === 2"
              title="确定删除此活动？"
              @confirm="deleteSeckillFn(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  type="danger"
                >删除</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              v-if="scope.row.state === 1"
              title="确定停止此活动？"
              @confirm="stopFn(scope.row.shopSeckillId)"
            >
              <template #reference>
                <el-button
                  link
                  type="danger"
                >停止</el-button>
              </template></el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :total="page.total"
      style="margin: 12px 0;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 新增活动 -->
    <SpikeForm
      ref="spikeFormRef"
      @reset="reset"
    />
    <!-- 数据效果（秒杀） -->
    <el-dialog
      v-model="visible.detail"
      :close-on-click-modal="true"
      title="数据效果（秒杀）"
      width="55%"
      top="50px"
      class="group-dialog"
      @close="visible.detail = false"
    >
      <!-- 表格 -->
      <div class="dataEffect">
        <h3>实时统计</h3>
        <div class="couponTit">活动名称：{{ detailData.seckillName }}</div>
        <div class="dataListBox">
          <div class="dataItem">
            <span>{{ detailData.visit }}</span>
            <p>浏览量</p>
          </div>
          <div class="dataItem">
            <span>{{ detailData.pays }}</span>
            <p>支付买家数</p>
          </div>
          <div class="dataItem">
            <span>{{ detailData.conversion }}</span>
            <p>支付转化率</p>
          </div>
          <div class="dataItem">
            <span>￥{{ detailData.total }}</span>
            <p>活动成交金额</p>
          </div>
        </div>
        <div class="tabListInfo">活动成交的商品</div>
        <div class="tableBox">
          <el-table
            :data="detailData.products.list"
            border
            height="150"
            :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              prop="productName"
              label="商品名称"
              show-overflow-tooltip
            />
            <el-table-column
              prop="number"
              label="付款件数"
              show-overflow-tooltip
            />
            <el-table-column
              prop="users"
              label="付款人数"
              show-overflow-tooltip
            />
          </el-table>
          <div class="pagination">
            <el-pagination
              :current-page="detailPage.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="detailPage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="detailPage.total"
              @size-change="activeDataSizeChange"
              @current-change="activeDataCurrentChange"
            />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import SpikeForm from '@/views/marketing/spike/form.vue'

import {
  getSeckillList,
  deleteSeckill,
  seckillStop,
  getSeckillData,
} from '@/api/marketing'

import { useActivityHooks } from '@/views/marketing/hooks/dialogHooks.js'
import { defineComponent, onMounted, reactive, ref } from 'vue'

defineComponent({
  name: 'ActivitySpike'
})
const spikeFormRef = ref()

const {
  addActivity,
  editActivity,
  visitActivity,
  reset,
} = useActivityHooks({
  ref: spikeFormRef,
  resetCallbck: getAll
})

const loading = reactive({
  table: false
})
let visible = reactive({
  detail: false,
})

let page = reactive({
  page: 1,
  pageSize: 10,
  total: 0
});
/**
 * @property {string} seckillName 秒杀名称
 * @property {string} state 秒杀状态
 */
let query = reactive({
  seckillName: '',
  state: null,
})
let tableData = ref([]);
// 初始化查询所有数据
function getAll () {
  loading.table = true
  getSeckillList(Object.assign({}, page, query)).then(res => {
    tableData.value = res.data.list
    page.total = res.data.total
  }).finally(() => {
    loading.table = false
  })
}
//  查询
function search () {
  page.page = 1
  getAll()
}
// 清除
function clear () {
  page.page = 1
  page.pageSize = 10
  query.seckillName = ''
  query.state = null
  getAll()
}
function handleCurrentChange (val) {
  page.page = val
  getAll()
}
function handleSizeChange (val) {
  page.pageSize = val
  getAll()
}

// 停止秒杀活动
function stopFn (id) {
  seckillStop({ shopSeckillId: id }).then((res) => {
    if (res.code === '') {
      ElMessage.success('停止成功')
      page.page = 1
      getAll()
    } else {
      ElMessage.error(res.message)
    }
  })
}
// 删除秒杀
function deleteSeckillFn (data) {
  deleteSeckill({ shopSeckillId: data.shopSeckillId }).then((res) => {
    if (res.code === '') {
      ElMessage.success('删除成功')
      page.page = 1
      getAll()
    } else {
      ElMessage.error(res.message)
    }
  })
}

/**
 * 数据详情
 */
let detailPage = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})
let detailQuery = reactive({})
let detailData = ref({
  products: {
    list: []
  }
})
// 显示数据效果
function showData (row) {
  getActiveData(row.shopSeckillId)
  visible.detail = true
}
// 获取活动数据
function getActiveData (id) {
  if (id) {
    detailQuery.shopSeckillId = id
  }
  getSeckillData(Object.assign({}, detailPage, detailQuery)).then((res) => {
    if (res.code === '') {
      detailData.value = res.data
    } else {
      ElMessage.error(res.message)
    }
  })
}
function activeDataCurrentChange (val) {
  detailPage.page = val
  getActiveData()
}
function activeDataSizeChange (val) {
  detailPage.pageSize = val
  getActiveData()
}

onMounted(() => {
  getAll()
})
</script>

<style lang="scss" scoped>
.pending {
  padding: 20px;
  margin-top: 20px;
  background-color: #FFFFFF;
}
// .fenye {
//   margin-top: 20px;
// }
.dataEffect {
  .couponTit {
    margin: 20px 0;
  }
  .dataListBox {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    .dataItem {
      width: 220px;
      height: 120px;
      border-radius: 8px;
      border: 1px solid #999999;
      text-align: center;
      margin: 0 10px;
      span {
        display: block;
        margin-top: 35px;
      }
    }
  }
  .tabListInfo {
    margin: 20px 0;
  }
}
.pagination {
  padding-top: 20px;
}
</style>